<template>
  <div style="margin-top: 100px;margin-left: 330px;width: 300px;">

    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="名称" prop="dorName">
        <el-input v-model="ruleForm.dorName"></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="dorPhone">
        <el-input v-model="ruleForm.dorPhone"></el-input>
      </el-form-item>

      <el-form-item label="规格">
        <el-input v-model="ruleForm.dorNum" readonly></el-input>
      </el-form-item>

      <el-form-item label="楼宇">
        <el-input v-model="buildList.bmsg" readonly></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即修改</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "DormitoryUpData",
  data(){
    return{
      buildList:'',
      dorNum:[
        {id:'1',value:'4'},
        {id:'2',value:'6'},
        {id:'3',value: '8'}
      ],
      ruleForm:{
        dorName:'',
        dorNum:'',
        dorPhone:'',
        dorBed:'',
        bId:''
      },
      rules: {
        dorName: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        dorPhone: [
          { required: true, message: '请输入电话', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm(formName) {
      const _this=this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios.get('http://192.168.163.234:8081/dormitory/upDate/'+_this.$route.query.id, {params:_this.ruleForm}).then(
              function (response) {
                if (response.data.code==0){
                  _this.$alert(_this.ruleForm.dorName+'修改成功!','',{
                    confirmButtonText:'确定',
                    callback:action => {
                      _this.$router.push('/dormitoryManager')
                    }
                  })
                }
              })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  created() {
    const _this=this
    axios.get("http://192.168.163.234:8081/dormitory/list/"+_this.$route.query.id).then(
        function (response) {
          _this.ruleForm.dorName=response.data.data.dorName
          _this.ruleForm.dorNum=response.data.data.dorNum
          _this.ruleForm.dorPhone=response.data.data.dorPhone
          _this.ruleForm.dorBed=response.data.data.dorBed
          _this.ruleForm.bId=response.data.data.bid
        }
    )
  },
  watch:{
    "ruleForm.bId":{
      handler(){
        const _this=this
        axios.get('http://192.168.163.234:8081/building/findById/'+_this.ruleForm.bId).then(
            function (response) {
              _this.buildList=response.data.data
            }
        );
      }
    }
  }
}
</script>

<style scoped>

</style>
